<template>
  <div class="row">
      <div class="col-md-2 second-nav " >
        <div class="box btn-group">
            <router-link to="/user/index" class="btn btn-light" >个人主页</router-link>
            <router-link to="/user/book" class="btn btn-light" >通讯录</router-link>
            <div class="btn-group dropdown">
                <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown">
                更多
                </button>
                <div class="dropdown-menu">
                <router-link to="/user/set" class="dropdown-item text-center">设置</router-link>
                <span class="dropdown-item text-center text-center pointer" @click="logout">退出登录</span>
                </div>
            </div>
        </div>
      </div>
      <div class="col-md-10 user-page">
          <router-view></router-view>
      </div>
  </div>
</template>

<script>
import {LOGOUT} from '../../store/mutation_types.js';
export default {
 methods:{
     logout(){
         this.$store.commit(LOGOUT)
         this.$router.push('/login')
     }
 }
}
</script>

<style scoped lang="less">
@import "../../assets/css/theme.less";
@media screen and (min-width:768px){
    .box{
        height:100%;
        position:fixed;
        max-width: 180px;
        min-width:150px;
        width:15%;
        padding:20px 0;
        background-color: @cut4;  
       flex-direction: column;
        justify-content: flex-start !important;
        background-image: url();

       .btn{
           font-size: 1rem;
           min-width:100px;
           width: 60%;
           margin: 10px auto;
           margin-left: 2rem;
       }
    }
}
@media screen and (max-width:768px){
    .box{
       background-color:@cut2;
       padding:15px 0;
       flex-direction: row;
        .btn{
           font-size: 12px;
           margin: 0 5px;
       }
    }
    .second-nav{
        box-shadow: 0 5px 10px #9d9d9d;
        height:57px;
    }
}
.second-nav{
    position:relative;
    min-height:30px;
    padding:0 10px;
}
.box{
    display: flex;
    justify-content: center;
    box-shadow: none;
    padding-bottom: 10px;
    .btn{
        border-radius: 5px !important;
    }
}
.user-page{
    padding:10px;
    position: relative;
    
}
a.router-link-active{
    background-color: @cut3;
    color:#fff;
}
</style>
